<template>
  <div>
    <header style="display: flex; justify-content: flex-end">
      <el-button type="primary" @click="add">增加规格</el-button>
    </header>
    <el-table border :data="tableData" style="margin-top: 20px">
      <el-table-column prop="cpu" label="CPU"> </el-table-column>
      <el-table-column prop="ram" label="内存"> </el-table-column>
      <el-table-column prop="gpu" label="GPU数量"> </el-table-column>
      <el-table-column prop="name" label="可用区">
        <template #default="scope">
          {{ scope.row?.az_list.map((it) => it.name).join(",") }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="{ index }">
          <el-button type="danger" @click="deleteRow(index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹框 -->
    <el-dialog
      v-model="visible"
      title="新增规格族"
      :width="'60%'"
      :before-close="handleClose"
    >
      <section>
        <el-row :gutter="20">
          <el-col :span="6">
            <AzChosen
              v-model="available_zone_id"
              v-model:available_zone_name="available_zone_name"
              :visible="visible"
              @getAllFamily="getAllFamily"
            />
          </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table
          border
          :data="familyList"
          style="margin-top: 20px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="cpu" label="vCPU"> </el-table-column>
          <el-table-column prop="ram" label="内存"> </el-table-column>
          <el-table-column prop="gpu" label="GPU数量"> </el-table-column>
          <el-table-column prop="available_zone_name" label="可用区">
          </el-table-column>
          <el-table-column prop="bound" label="是否已绑定">
            <template #default="scope">
              {{ scope.row.bound ? "是" : "否" }}
            </template>
          </el-table-column>
        </el-table>
      </section>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="add_confirm" type="primary">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">更新</el-button>
    </footer>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import GoodsService from '@/service/eks/goods';
import { defineAsyncComponent, onMounted, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
const AzChosen = defineAsyncComponent(() => import('./components/AzChosen.vue'));

const route = useRoute();
const router = useRouter();

const boundData = ref({});
const tableData = ref([]);
const getGoodsSpec = () => {
  GoodsService.getGoodsSpec({
    family_id: route.query?.family_id,
    goods_id: route.query?.goods_id,
    category_id: route.query?.category_id,
  }).then(res => {
    if (res.code === 'Success') {
      boundData.value = res.data;
      tableData.value = res.data?.spec_list
    }
  })
}

const visible = ref(false);
const available_zone_id = ref('');
const available_zone_name = ref('');
const add = () => {
  visible.value = true;
}
const selectionList = ref([]);
const handleSelectionChange = (val) => {
  selectionList.value = val;
}
const add_confirm = () => {

  ElMessageBox.confirm(
    '您确认要替换已有规格?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      tableData.value = [...selectionList.value.map(el => {
        return {
          ...el,
          az_list: [
            {
              id: available_zone_id.value,
              name: available_zone_name.value
            }
          ]
        }
      })];
      visible.value = false;
      ElMessage.success('替换成功')
    })
    .catch(() => {
      ElMessage.success('取消替换')
    })
}

const handleClose = (done) => {
  visible.value = false
  done()
}

const familyList = ref([]);
watch(() => available_zone_id.value, (nVal) => {
  if(nVal) {
    getAllFamily()
  }
}, {immediate: true})
const getAllFamily = () => {
  if (!available_zone_id.value) {
    ElMessage.error('请选择可用区')
    return
  }
  GoodsService.getAllFamily({
    family_id: route.query?.family_id,
    available_zone_id: available_zone_id.value
  }).then(res => {
    if (res.code === 'Success') {
      familyList.value = res.data.spec_list?.map(el => {
        let obj = {
          ...el,
          ...res.data,
          available_zone_name: available_zone_name.value
        }
        delete obj?.spec_list
        return obj
      })
    }
  })
}

const deleteRow = (index) => {
  ElMessageBox.confirm(
    '您确认要删除此规格吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      tableData.value.splice(index, 1)
      ElMessage.success('删除成功')
    })
    .catch(() => {
      ElMessage.success('取消删除')
    })
}


const cancel = () => {
  router.go(-1)
}
const confirm = () => {
  ElMessageBox.confirm(
    '您确认要更新规格吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      updateGoodsSpec()
    })
    .catch(() => {
      ElMessage.success('取消更新')
    })

}
const updateGoodsSpec = () => {
  GoodsService.updateGoods({
    family_id: route.query?.family_id,
    goods_id: route.query?.goods_id * 1,
    spec_list: tableData.value.map(el => {
      return {
        "cpu": el?.cpu,
        "gpu": el?.gpu,
        "ram": el?.ram
      }
    })
  }).then(res => {
    if (res.code === 'Success') {
      ElMessage.success('更新成功')
      router.go(-1)
    }
  })
}

onMounted(() => {
  getGoodsSpec()
})
</script>

<style lang="scss" scoped>
footer {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>